<template>
	<view class="content">
		<view class="baoxiao-tab">
			<view class="tab-li" :class="user_status === item.user_status ?'active':''" v-for="(item,index) in tabList"
				:key="index" @click="orderTab(item)">
				<text>{{item.name}}</text>
			</view>
		</view>
		<!-- 订单列表 -->
		<view class="order-list" v-if="orderList.length > 0">
			<view class="order-li" 
				v-for="(item,index) in orderList" :key="index">
				<view class="order-li-top">
					<text>提交时间：{{ item.createtime }}</text>
					<text class="type" v-if="item.repair_status == -1">待接单</text>
					<text class="type" v-if="item.repair_status == 0">维修中</text>
					<text class="type" v-if="item.repair_status == 1">待确认</text>
					<text class="type" v-if="item.repair_status == 2">无法维修</text>
					<text class="type" v-if="item.repair_status == 3">已完成</text>
				</view>
				<view class="order-cen">
					<view style="font-weight: bold;font-size: 30rpx;margin-bottom: 10rpx;color: #333;">
						报修类目：{{item.classification_name}}</view>
					<view>维修地点：{{item.report}}</view>
				</view>
				<view class="order-bot">
					<!-- <view class=" btn2" v-if="item.repair_status == 2" @click="jump('/pages/service/order/order-xq?id='+item.id+'&index='+index)">
						<text>确认完成</text>
					</view> -->
					<view class="btn1" @click="jump('/pages/service/order/order-xq?id='+item.id+'&index='+index)">
						<text>查看详情</text>
					</view>
					<view class="btn2" v-if="item.repair_status == -1" @click="open(item.id,0,index)">
						<text>立即接单</text>
					</view>
					<view class="btn2" v-if="item.repair_status == 0" @click="opentuidan(item.id)">
						<text>退单</text>
					</view>
					
				</view>
			</view>
		</view>

		<view class="" v-else style="margin-top: 15vh;">
			<u-empty text="暂无数据" mode="list"></u-empty>
		</view>
		
		<u-modal v-model="show" :title="title" :confirm-text="confirmtext" @confirm="confirm" @cancel="cancel" show-cancel-button >
			<view class="slot-content">
				<rich-text :nodes="content"></rich-text>
			</view>
		</u-modal>
		<u-modal v-model="show1" :title="title" confirm-text="订单详情" @confirm="confirm"  @cancel="cancel" show-cancel-button >
			<view class="slot-content">
				<rich-text :nodes="content"></rich-text>
			</view>
		</u-modal>
		<u-modal v-model="tuidan" content="是否退单" confirm-text="确认退单" show-cancel-button cancel-text="取消" @cancel="qxdingdan()" @confirm="qdtuidan()">
			<u-input style="padding: 10rpx;" v-model="tuidan_message" type="textarea" border="true" height="200" auto-height />
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user_status: -1,
				pages: 1,
				last_page: 2,
				tabList: [{
						type: '',
						name: '全部',
						user_status: ''
					},
					// {
					// 	type:'',
					// 	name:'已提交',
					// 	user_status:0
					// },
					{
						type: '',
						name: '待接单',
						user_status: -1
					},
					{
						type: '',
						name: '维修中',
						user_status: 0
					},
					{
						type: '',
						name: '待确认',
						user_status: 1
					},
					// {
					// 	type: '',
					// 	name: '无法维修',
					// 	user_status: 2
					// },
					{
						type: '',
						name: '已完成',
						user_status: 3
					},
				],
				orderList: [],
				show: false,
				show1:false,
				content: '',
				title:'',				
				orderid:'',
				confirmtext:'确认',
				index:'',
				tuidan:false,
				tuidan_id:'',
				tuidan_message:''
			}
		},
		onShow() {
			this.getOrderList()
			let that = this
			uni.$on('weixiu', function(res) {
				that.pages = 1
				that.orderList = []
				that.getOrderList()
			})
		},
		onLoad(e) {
			this.getOrderList()
			let that = this
			uni.$on('weixiu', function(res) {
				that.pages = 1
				that.orderList = []
				that.getOrderList()
			})
		},
		onPullDownRefresh() {
			this.pages = 1
			this.orderList = []
			this.getOrderList()
		},
		onReachBottom() {
			if (this.last_page > this.pages) {
				this.pages++
				this.orderList = []
				this.getOrderList()
			}
		},
		methods: {
			radioGroupChange(e) {
				console.log(e);
				if (e == 0) {

				} else {

				}
			},
			opentuidan(e){
				this.tuidan = true
				this.tuidan_id = e
			},
			qdtuidan(){
				if(this.tuidan_message == ''){
					uni.showToast({
						icon:'none',
						title:'请输入退单原因'
					})
					return
				}
				let data = {
					id:this.tuidan_id,
					message:this.tuidan_message
				}
				this.$u.post('service/refund_order',data).
				then(res =>{
					uni.showToast({
						icon:'success',
						title:'提交成功'
					})
					this.tuidan_id = '',
					this.tuidan_message = ''
					this.getOrderList()
					//console.log(res)
				}).catch(res=>{
					//console.log(res)
					uni.showToast({
						icon:'none',
						title:res.data.msg
					})
				})
			},
			qxdingdan(){
				this.tuidan = false
				this.tuidan_id = ''
				this.tuidan_message = ''
			},	
			open(e,q,i){
				//console.log(e,q,i)
				this.title = "温馨提示";		
				
				if(q == 0){
					this.orderid = e;
					this.content =  `
										<p style="text-align:center;line-height: 30px;">接单成功后，需要在<br>
										规定时间内完成维修,确定接单吗?</p>
									`;
					this.index = i
					this.show = true;
				}if(q != 0){
					this.content =  `
										<p style="text-align:center;line-height: 30px;">您已接收到订单<br>
									请在我的维修订单更新进度</p>
									`;
					this.confirmtext = '订单详情'
					this.index = i
					//console.log(e,q,i,'2')
					this.show1 = true;
				}
				
				
			},
			confirm(){
				if( this.confirmtext == '确认' ){
					//console.log('提交')
					//this.open(this.orderid,1)
					this.$u.post('/service/order_receive', {
						id:this.orderid
					}).then(res => {
						//console.log(res)
						this.open(this.orderid,1,this.index)
					})
					// this.getOrderList()
				}else{
					//console.log('查看详情')
					this.jump('/pages/service/order/order-xq?id='+this.orderid+'&index='+this.index)
					this.orderid = ''
					this.index = ''
					this.confirmtext = '确认'
				}
				
				
			},
			cancel(){
				this.orderid = '';
				this.index = '';
				this.confirmtext = '确认'
				this.show = false;
				this.show1 = false;
				this.getOrderList()
			},
			// 
			orderTab(item) {
				this.pages = 1
				this.orderList = []
				this.user_status = item.user_status
				this.getOrderList()
			},

			// 获取报修订单
			getOrderList() {

				this.$u.post('/service/list', {
					// user_status: this.user_status == -1 ? '' : this.user_status,
					user_status: this.user_status,
					page: this.pages,
					size: 20
				}).then(res => {
					//console.log(res)
					this.last_page = res.data.last_page
					this.orderList = res.data.data
				})
			},
			jump(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="less">
	.u-model__content{
		padding: 15rpx;
	}
	.content {
		padding-top: 0;
	}
	.order-cen view{
		font-size: 34rpx !important;
	}
	.baoxiao-tab {
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 31rpx;
		height: 80rpx;
		margin: 0 -20rpx;
		margin-top: 5rpx;
		margin-bottom: 10rpx;
	
	}
	.tab-li{
		font-size: 39rpx;
		margin-right: 10rpx;
		white-space: nowrap;
	}
	.tab-li.active {
		font-weight: bold;
		color: #0055B0;
	}
	
	.order-li {
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		background: #fff;
	}
	
	.order-li-top {
		height: 111rpx;
		font-size: 33rpx;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #F7F7F9;
		padding: 0 20rpx;
		justify-content: space-between;
	}
	
	.order-cen {
		padding: 40rpx 20rpx;
		border-bottom: 1px solid #F7F7F9;
	
		view {
			color: #7C7C7C;
			font-size: 28rpx;
		}
	}
	
	.order-bot {
		height: 110rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	
		button {
			margin: 0;
		}
	
		padding: 0 20rpx;
	}
	
	.btn1,
	.btn2 {
		width: 150rpx;
		height: 65rpx;
		border: 1px solid #333;
		border-radius: 25rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 29rpx;
		font-weight: 500;
		margin-left: 30rpx !important;
	}
	
	.type {
		color: #0055B0;
	}
	
	.btn2 {
		color: #0055B0;
		border: 1px solid #0055B0;
	}
</style>
